<!--
 * @FilePath     : /layui/demo/1570.html
 * @Description  : 多选取值
 * @Date         : 2025-02-24 15:30
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-24 15:31
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="demo2" class="xm-select-demo"></div>
    <button class="btn" id="demo2-getValue">获取选中值</button>

    <br />
    <br />

    <button class="btn" id="name">获取name数组</button>
    <button class="btn" id="nameStr">获取name字符串</button>
    <button class="btn" id="value">获取value数组</button>
    <button class="btn" id="valueStr">获取value字符串</button>

    <pre id="demo2-value"></pre>

    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      var demo2 = xmSelect.render({
        el: '#demo2',
        data: [
          { name: '张三', value: 1 },
          { name: '李四', value: 2 },
          { name: '王五', value: 3 },
        ],
      })

      document.getElementById('demo2-getValue').onclick = function () {
        //获取当前多选选中的值
        var selectArr = demo2.getValue()
        document.getElementById('demo2-value').innerHTML =
          `\ndemo2.getValue()\n\n` + JSON.stringify(selectArr, null, 2)
      }

      var types = ['name', 'nameStr', 'value', 'valueStr']
      types.forEach(function (type) {
        document.getElementById(type).onclick = function () {
          //获取当前多选选中的值
          var selectArr = demo2.getValue(type)
          document.getElementById('demo2-value').innerHTML =
            `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2)
        }
      })
    </script>
  </body>
</html>
